<template>
  <div class="content-page-01" ref="contentPage01">
    <div class="center" ref="center" id="content-page-01-parallax">
      <div class="layer" data-depth="0.05">
        <img class="rope" src="../../../assets/images/rope.png" alt="">
        <my-echarts-01 />
      </div>
      <div class="layer" data-depth="0.10">
        <my-echarts-02 />
      </div>
      
      <div class="layer layer-table" data-depth="0.15">
        <img class="table" src="../../../assets/images/table.png" alt="" ref="table">
      </div>
      <div class="layer" data-depth="0.08">
        <img class="fork" src="../../../assets/images/fork.png" alt="">
      </div>
      <div class="layer" data-depth="0.20">
        <img class="pot" src="../../../assets/images/pot.png" alt="">
      </div>
      <div class="layer" data-depth="0.20">
        <img class="jar" src="../../../assets/images/jar.png" alt="">
      </div>
      <div class="layer" data-depth="0.18">
        <img class="plate" src="../../../assets/images/plate.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Parallax from 'parallax-js'

import myEcharts01 from '../my_echarts_01/my_echarts_01.vue'
import myEcharts02 from '../my_echarts_02/my_echarts_02.vue'

export default {
  name: "content-page-01",
  components: {
    myEcharts01,
    myEcharts02
  },
  mounted() {
    let scene = document.getElementById('content-page-01-parallax');
    let parallax = new Parallax(scene);

    let w_height = window.innerHeight < 920 ? 920 : window.innerHeight;
    this.$refs.contentPage01.style.height = w_height + "px"; // 让 canvas 高度自适应
    this.$refs.center.style.height = w_height + "px";

    let w_width = window.innerWidth < 1280 ? 1280 : window.innerWidth;
    this.$refs.table.style.width = w_width + 60 + "px";
    this.$refs.table.style.left = - (w_width / 2 - 640 + 30) + "px";
  }
}
</script>

<style scoped>
  .content-page-01 {
    width: 100%;
    height: 920px;
    background: url("../../../assets/images/content_bg01.jpg") center no-repeat;
    border-radius: 10px;
    border-top: 10px solid #e6f1f9;
    box-sizing: border-box;
    overflow: hidden;
    caret-color: transparent; /* 去除光标颜色 */
  }

  .center {
    width: 1280px;
    height: 920px;
    margin: 0 auto;
    padding: 30px;
    position: relative;
    box-sizing: border-box;
  }

  .layer {
    width: 100%;
    pointer-events: auto;
  }

  .rope {
    position: absolute;
    top: -20px;
    left: 220px;
  }

  .fork {
    position: absolute;
    left: 880px;
    top: 50px;
  }

  .pot {
    position: absolute;
    left: 10px;
    top: 640px;
  }

  .plate {
    position: absolute;
    left: 530px;
    top: 788px;
  }

  .jar {
    position: absolute;
    left: 1062px;
    top: 732px;
  }

  .table {
    position: absolute;
    bottom: -30px;
  }

  .layer-table {
    top: unset !important;
    bottom: 0;
  }
</style>